<template>
	<view class="app">
		<view class="item" @click="data(item.mode)" v-for="(item,index) in list" :key="index">{{item.t}}</view>
		<view class="title">在控制台查看打印结果</view>
		<TimeSelection :mode="dateType" ref="timeSelection" @valueStart="valueStart($event)" @valueEnd="valueEnd($event)" @click="timeOk($event)" :isEnd="false"/>
	</view>
</template>

<script>
	import TimeSelection from "@/components/time-selection.vue"
	export default{
		components:{TimeSelection},
		data(){
			return {
				list:[
					{t:'年月日',mode:'date'},
					{t:'年月日时分秒',mode:'datetime'},
					{t:'时分',mode:'time'}
				],
				dateType:'date',
			}
		},
		methods:{
			data(type){
				this.dateType=type
				this.$refs.timeSelection.timePopUp()
			},
			valueStart(res){
				console.log(res)
			},
			valueEnd(res){
				console.log(res)
			},
			timeOk(res){
				console.log(res)
			}
		}
	}
</script>

<style scoped lang="scss">
	// .app{min-height: 100vh;display: flex;align-items: center;justify-content: center;}
	.item{width: 100%;height: 100rpx;line-height: 100rpx;font-size: 30rpx;padding-left: 25rpx;border-bottom: 1px solid #eee;color: #333;}
	.title{text-align: center;font-size: 30rpx;color: #999;line-height: 200rpx;}
</style>
